<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>忘记密码 - {:conf('site_name')}</title>
    <meta name="keywords" content="忘记密码,找回密码,{:conf('site_name')}">
    <meta name="description" content="忘记密码 - {:conf('site_name')}">
    <meta name="author" content="www.qqss.net">
    <!-- Favicon -->
    <link rel="icon" href="{:conf('site_favicon')}" type="image/x-icon">
    <!-- CSS -->
    <link href="/static/default/css/tailwind/tailwind.min.css?v={$static_version}" rel="stylesheet">
    <link href="/static/css/fontawesome/css/all.min.css?v={$static_version}" rel="stylesheet">
    <link href="/static/default/css/main.css?v={$static_version}" rel="stylesheet">
    <link href="/static/default/css/mobile-optimization.css?v={$static_version}" rel="stylesheet">
    <link href="/static/default/css/user/auth.css?v={$static_version}" rel="stylesheet">
    <!-- 插件头部hook -->
    {cms:hooks name="template.head" /}
</head>

<body class="bg-gray-50">
    <!-- 插件头部hook -->
    {cms:hooks name="common.header.before" /}

    <div class="auth-container flex min-h-screen">
        <!-- 左侧图片区域 -->
        <div class="auth-left w-1/2 hidden lg:flex flex-col justify-center items-center text-white p-12 relative">
            <!-- 浮动图标 -->
            <i class="floating-icon fas fa-key text-4xl opacity-20"></i>
            <i class="floating-icon fas fa-envelope text-3xl opacity-15"></i>
            <i class="floating-icon fas fa-shield-alt text-5xl opacity-10"></i>
            <i class="floating-icon fas fa-undo-alt text-3xl opacity-25"></i>

            <div class="text-center z-10 relative max-w-md mx-auto">
                <!-- 主标题 -->
                <div class="mb-8">
                    <h1
                        class="text-5xl xl:text-6xl font-bold mb-4 bg-gradient-to-r from-white to-blue-100 bg-clip-text text-transparent">
                        找回密码
                    </h1>
                    <div class="w-16 h-1 bg-white bg-opacity-60 mx-auto rounded-full"></div>
                </div>

                <!-- 描述文案 -->
                <p class="text-xl xl:text-2xl mb-12 opacity-90 leading-relaxed font-light">
                    别担心，我们来帮您<br>
                    <span class="text-lg opacity-75">安全找回，重新开始</span>
                </p>

                <!-- 特色功能 -->
                <div class="grid grid-cols-1 gap-6 mb-8">
                    <div class="flex items-center justify-center space-x-3 py-3 px-6 backdrop-blur-sm">
                        <i class="fas fa-envelope-open-text text-2xl text-blue-200"></i>
                        <span class="text-lg font-medium">邮箱验证</span>
                    </div>
                    <div class="flex items-center justify-center space-x-3 py-3 px-6 backdrop-blur-sm">
                        <i class="fas fa-shield-alt text-2xl text-green-200"></i>
                        <span class="text-lg font-medium">安全重置</span>
                    </div>
                    <div class="flex items-center justify-center space-x-3 py-3 px-6 backdrop-blur-sm">
                        <i class="fas fa-clock text-2xl text-purple-200"></i>
                        <span class="text-lg font-medium">快速恢复</span>
                    </div>
                </div>

                <!-- 底部提示 -->
                <div class="text-sm opacity-60">
                    <p>重置链接将在 <span class="font-semibold text-yellow-200">15分钟</span> 内有效</p>
                </div>
            </div>
        </div>

        <!-- 右侧表单区域 -->
        <div class="auth-right w-full lg:w-1/2 flex items-center justify-center p-6 lg:p-12">
            <div class="w-full max-w-md space-y-8">
                <!-- 头部 -->
                <div class="text-center">
                    <div class="mb-6">
                        <!-- <img class="mx-auto h-12 w-auto" src="{:conf('site_logo')}" alt="{:conf('site_name')}"> -->
                    </div>
                    <h2 class="text-2xl md:text-3xl font-bold text-gray-800 mb-2">
                        找回密码
                    </h2>
                    <p class="text-sm text-gray-500">
                        想起密码了？
                        <a href="{:_url_('user.login')}"
                            class="font-medium text-blue-600 hover:text-blue-500 transition-colors">
                            立即登录
                        </a>
                    </p>
                </div>

                <!-- 找回密码表单 -->
                <form id="forgot-form" class="space-y-6" onsubmit="return false;">
                    <div class="space-y-4">
                        <!-- 邮箱地址 -->
                        <div>
                            <label for="email" class="block text-sm font-medium text-gray-700 mb-2">
                                邮箱地址 <span class="text-red-500">*</span>
                            </label>
                            <input id="email" name="email" type="email" required
                                class="form-input appearance-none relative block w-full px-4 py-3 border border-gray-300 placeholder-gray-500 text-gray-900 rounded-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                                placeholder="请输入您注册时使用的邮箱地址">
                            <div id="email-tip" class="mt-1 text-xs text-gray-500"></div>
                        </div>
                    </div>

                    <!-- 发送重置邮件按钮 -->
                    <div>
                        <button type="submit" onclick="sendResetEmail()" id="reset-btn"
                            class="btn-shine relative w-full flex items-center justify-center py-3 px-4 border border-transparent text-sm font-medium rounded-lg text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-colors duration-300 overflow-hidden">
                            <span class="relative z-10 flex items-center">
                                <i class="fas fa-paper-plane mr-2"></i>
                                发送重置邮件
                            </span>
                        </button>
                    </div>

                    <!-- 提示信息 -->
                    <div class="text-center">
                        <div class="text-sm text-gray-500">
                            <p class="mb-2">
                                <i class="fas fa-info-circle mr-1 text-blue-500"></i>
                                重置邮件将发送到您的邮箱
                            </p>
                            <p>
                                没有收到邮件？请检查垃圾邮件文件夹
                            </p>
                        </div>
                    </div>
                </form>

                <!-- 其他选项 -->
                <div class="text-center">
                    <div class="text-sm text-gray-500">
                        <p class="mb-2">其他方式</p>
                        <div class="flex justify-center space-x-4">
                            <a href="{:_url_('user.login')}"
                                class="text-blue-600 hover:text-blue-500 transition-colors">
                                <i class="fas fa-sign-in-alt mr-1"></i>
                                返回登录
                            </a>
                            <a href="{:_url_('user.register')}"
                                class="text-blue-600 hover:text-blue-500 transition-colors">
                                <i class="fas fa-user-plus mr-1"></i>
                                注册新账户
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 引入脚本组件 -->
    {include file="default/components/scripts" /}

    <script>
        // 发送重置邮件
        function sendResetEmail() {
            const form = document.getElementById('forgot-form');
            const formData = new FormData(form);
            const btn = document.getElementById('reset-btn');
            const email = formData.get('email');

            // 基本验证
            if (!email) {
                showError('请输入邮箱地址');
                return;
            }

            const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
            if (!emailRegex.test(email)) {
                showError('邮箱格式不正确');
                return;
            }

            // 触发点击动画
            btn.classList.add('btn-clicked');
            setTimeout(() => btn.classList.remove('btn-clicked'), 800);

            // 触发点击动画
            btn.classList.add('btn-clicked');
            setTimeout(() => btn.classList.remove('btn-clicked'), 800);

            // 显示加载状态
            btn.disabled = true;
            const originalContent = btn.querySelector('span').innerHTML;
            btn.querySelector('span').innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i>发送中...';

            // 发送重置邮件请求
            $.ajax({
                url: '/auth/sendResetEmail',
                type: 'POST',
                data: {
                    email: email
                },
                dataType: 'json',
                success: function (response) {
                    if (response.code === 1) {
                        showSuccess('重置邮件已发送，请查收邮箱');
                        // 可以考虑跳转到提示页面或禁用按钮一段时间
                        setTimeout(() => {
                            btn.disabled = true;
                            btn.querySelector('span').innerHTML = '<i class="fas fa-check mr-2"></i>邮件已发送';
                            btn.className = btn.className.replace('bg-blue-600 hover:bg-blue-700', 'bg-green-600');
                        }, 1000);
                    } else {
                        showError(response.msg || '发送失败');
                    }
                },
                error: function (xhr, status, error) {
                    console.error('Reset email error:', error);
                    showError('网络错误，请稍后重试');
                },
                complete: function () {
                    btn.disabled = false;
                    btn.querySelector('span').innerHTML = '<i class="fas fa-paper-plane mr-2"></i>发送重置邮件';
                }
            });
        }

        // 页面加载完成后的初始化
        document.addEventListener('DOMContentLoaded', function () {
            // 聚焦邮箱输入框
            document.getElementById('email').focus();

            // 回车发送
            document.getElementById('forgot-form').addEventListener('keypress', function (e) {
                if (e.key === 'Enter') {
                    sendResetEmail();
                }
            });
        });
    </script>

    <!-- 插件底部hook -->
    {cms:hooks name="common.footer" /}
</body>

</html>